<template>
  <div ref="chartRef" id="ct_btm_echarts2" :style="{ width: '100%', height: '182px' }"></div>
</template>
<script lang="js">
import * as echarts from 'echarts';
export default {
  name: 'ctlineEcharts2',
  data() {
    return {
      myCharts1: null,

    };
  },
  mounted() {
    this.initEcharts(this.echartsValue);
    // window.onresize = () => {
    //   this.myCharts1.resize();
    // };


  },
  created() {
    var that = this;

    window.addEventListener('resize', () => {
      console.log(22222222222222222222222);
      that.myCharts1.resize();
    });
  },
  methods: {
    initEcharts(echartsValue) {
      var that = this;
      this.myCharts1 = echarts.init(document.getElementById('ct_btm_echarts2'));

      // 绘制图表
      let option = {
        backgroundColor: '#0c182d',
        grid: {
          top: '19%',
          bottom: '10%', //也可设置left和right设置距离来控制图表的大小
          left: '8%',
          right: '7%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ['充电量', '充电次数'],
          top: '15%',
          right: '15%',
          textStyle: {
            color: '#ffffff',
          },
        },
        xAxis: {
          data: ['1', '4', '6', '8', '10', '12'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#01FCE3',
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#7d8590', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '充电量（度）',
            nameTextStyle: {
              color: '#7d8590',
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFFFFF',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7d8590',
              },
            },
          },
          {
            type: 'value',
            name: '充电次数',
            nameTextStyle: {
              color: '#7d8590',
            },
            position: 'right',
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: '{value}', //右侧Y轴文字显示
              textStyle: {
                color: '#7d8590',
              },
            },
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
              },
            },
          },
        ],
        series: [
          {
            name: '充电量',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: '#058cff',
            },
            lineStyle: {
              color: '#058cff',
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)',
            },
            data: [2, 8, 4, 3, 9, 2, 4.3, 1.5],
          },
          {
            name: '充电次数',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00FFE3',
                  },
                  {
                    offset: 1,
                    color: '#4693EC',
                  },
                ]),
              },
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
          },
        ],
      };
      this.myCharts1.setOption(option);
      this.myCharts1.resize();
    },
  },
};
</script>
